<!-- <template> -->
    
    <!-- 组件的模板 -->
   <!--  <div class="page user-select multi-select">
      <ul class="list com-border-bottom" style="margin-top: -2px">
            <li class="weui-cells_checkbox has-hierarchy"  v-for='group in grouplist'>
              <label class="touch" for="{{group.id}}">
                  <div class="info com-border-bottom setHui" v-if="group.is_curdepartment == 1" @click="selectGroup(group)">
                      <p class="title">{{group.name}}</p>
                  </div>
                  <div class="info com-border-bottom"  v-else @click="selectGroup(group)">
                      <p class="title">{{group.name}}</p>
                  </div>
              </label>
              <div class="hierarchy" v-show="group.has_subdepartment == 1 && group.is_curdepartment == 0" @click="stepNext(group.id,group.team_id)">下级</div>
            </li>
      </ul>
    </div> -->

     <!-- 空页面 -->
    
     
<!-- </template> -->

<template>
    
    <!-- 组件的模板 -->
    <div class="page user-select multi-select">
      <scroller :lock-y="true" v-ref:scrollerdom>
        <div class="mod-crumbs bg-color scroller-wrap" v-show="hierarchyList.length>0">
          <template v-for="(index,hierarchy) in hierarchyList">
                <template v-if="index<(hierarchyList.length-1)">
                    <a class="nav-item" @click="stepHierarchy(index)">{{hierarchy.department_name}}</a>
                    <span class="arrow nav-item" style="margin:20px 8px;">&gt;</span>
                </template>
                <template v-if="index==(hierarchyList.length-1)">
                    <em class="nav-item">{{hierarchy.department_name}}</em>
                </template>
          </template>
        </div>
        </scroller>
            <ul class="list com-border-bottom com-border-top" v-if="teamListObj.sub_department.length">
            <template v-for="item in teamListObj.sub_department">
                <li class="weui-cells_checkbox has-hierarchy"  @click="stepNext(item.id,item.team_id)">
                    <label class="touch" for="{{group.id}}">
                        <div class="info com-border-bottom">
                              <p class="title">{{item.name}}</p>
                        </div>
                  </label>
                  <div class="hierarchy" @click="stepNext(group.id,group.team_id)">下级</div>
                </li>
            </template>
        </ul>
      <template v-if="teamListObj.department_user.length">
        <div class="list com-border-bottom com-border-top"> 
            <ul>
                <template v-for="item in teamListObj.department_user">
                    <li class="com-border-bottom" v-if="item.role != 1">
                        <a class="touch" href="javascript:;" @click="selectMember(item.user_id,item.real_name,item.team_id)">
                            <template v-if="item.status == 1">
                                <img class="avatar" v-if="item.logo.thumb_url" :src="item.logo.thumb_url" alt="">
                                <img class="avatar" v-else src="http://sta.doumistatic.com/src/image/saas/avatar.png" alt=""> 
                                <div class="info" v-if="item.role == 5">
                                    <p class="title">{{item.real_name}}</p>
                                </div>
                                <div class="info" v-else>
                                    <p class="title"><span class="tag" :class="{tag_1:(item.role == 1||item.role == 2),tag_2:(item.role == 8 || item.role == 3)}">{{item.role_name}}</span>{{item.real_name}}</p>
                                </div>
                            </template>
                            <template v-if="item.status == 0">
                                <div class="avatar-box">
                                    <img class="avatar" v-if="item.logo.thumb_url" :src="item.logo.thumb_url" alt="">
                                    <img class="avatar" v-else src="http://sta.doumistatic.com/src/image/saas/avatar.png" alt=""> 
                                    <span class="cover">未激活</span>
                                </div>
                               <div class="info" v-if="item.role == 5">
                                    <p class="title">{{item.real_name}}</p>
                                </div>
                                <div class="info" v-else>
                                    <p class="title">{{item.real_name}}<span class="tag" :class="{tag_1:(item.role == 1||item.role == 2),tag_2:(item.role == 8 || item.role == 3)}">{{item.role_name}}</span></p>
                                </div>
                            </template>
                        </a>
                    </li>
                </template>
            </ul>
        </div>
      </template>
    </div>

    <div class="page" v-if="empty">
        <div class="mod-empty">
            <div class="icon icon_1"></div>
            <p class="tip">暂无可选人员</p>
        </div>
    </div> 
     
</template>

<script>

    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import widget from 'gapi/widget'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import * as util from 'js/util.js'
    import GroupUtil from 'js/GroupUtil.js'
    import Scroller from 'vux/dist/components/scroller'
    import clientUi from 'gapi/clientUi.js'
    import teamApi from 'clientApi/teamApi.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
let pageDate = {}
let webViewID = ''
    /**
     *  组件实例对象
     */
    export default {
        components: {
          Scroller
        },
        data: function(){
            return{
                empty:false,
                group:{},
                department_id:'',
                hierarchyList:[],
                grouplist:[],
                cacheGroupList:[],
                teamListObj:{
                    department_id:'',
                    sub_department:[],
                    department_user:[]
                }
            }
        },
        watch: {
          'hierarchyList': function(){
            let allWidth = 0
            this.$nextTick(function () {
              if($('.scroller-wrap .nav-item').length){
                $('.scroller-wrap .nav-item').each(function(i, o){
                  if(o.tagName.toLowerCase() == 'a'){
                    allWidth += (parseInt(o.offsetWidth) + 16)
                  }else{
                    allWidth += parseInt(o.offsetWidth)
                  }
                })
                allWidth += 30
                $('.scroller-wrap').width(allWidth + 'px')

                this.$refs.scrollerdom.reset()
              }
            })
          }
        },
        computed: {
            
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                 //从urd中获取参数
                this.tid = util.getUrddataString('teamId') //teamid
                this.id = util.getUrddataString('id') //teamid
                this.webViewId = util.getUrddataString('webViewId') 
                this.user_id = util.getUrddataString('user_id') //user_id
                window.loadData = () => {
                    this.getGroupList()
                }
                //获取部门信息
                this.getGroupList()
                commonPage.getWebViewID((data)=>{ 
                    webViewID = data
                })
            },
            //跳转下一级
            stepNext(id,teamid){
                 // window.location.href="dmsaas://TeamDepartmentSelect?urdData="+encodeURIComponent(`id=${id}&myself=${1010}&teamid=${teamid}&department_id=${pageDate.department_id}&backType=${pageDate.backType}`)

                let str = `id=${id}&webViewId=${this.webViewId}&teamId=${teamid}`
                let encodeStr = encodeURIComponent(str)
                location.href = `dmsaas://TeamSelectSinglePeople?urdData=${encodeStr}`
            },
            //点击对应层级
            stepHierarchy(index){
                let leg = this.hierarchyList.length-1
                if(index<leg){
                  console.log('webViewID'+index)
                    cache.getMemoryCache('webViewID'+index,(data)=>{
                      console.log(data)
                        if(data){
                           commonPage.goBack(1,{},data.webViewID)
                        }
                    })
                }
            },
            // 获取小组列表
            getGroupList(){
              let _data = {
                  team_id:this.tid,
                  department_id:this.id ? this.id : 1,  // 部门id
                  department_only:0,
                  cur_department:this.department_id ? this.department_id : 0
              }
              console.log(_data)
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/team/department_organ', 
                    type:'GET',
                    data:_data,
                    success: (obj) => {
                        console.log(JSON.stringify(obj))
                        commonPage.loadPageStatus('loadSuccess')
                        if(obj&&obj.errno==0){
                            this.grouplist = obj.data.sub_department
                            let allGroupList = obj.data.sub_department
                            this.hierarchyList = obj.data.breadcrumb
                            this.teamListObj.department_id = obj.data.department_id
                            this.teamListObj.sub_department = obj.data.sub_department
                            this.teamListObj.department_user = obj.data.department_user
                            let len = this.hierarchyList.length-1
                            if(this.teamListObj.sub_department.length == 0 && this.teamListObj.department_user.length == 1 && this.teamListObj.department_user[0].role == '超级管理员'){
                                this.empty = true
                            }
                            if(this.teamListObj.department_user.length == 0 && this.teamListObj.sub_department.length == 0){
                                this.empty = true
                            }
                            console.log('webViewID'+len)
                            cache.setMemoryCache('webViewID'+len,{'webViewID':webViewID})
                            cache.setMemoryCache('allGroupList',allGroupList)
                            cache.setMemoryCache('cacheGroupList',this.grouplist)
                        }else if(obj.errmsg){
                             widget.toast(obj.errmsg)
                        }else{
                             widget.toast('获取小组数据异常')
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')

                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
             // 选择人员转让
            selectMember (to_user_id,real_name,to_team_id){
                let _data = {
                    team_id:this.tid,
                    project_id: 0,
                    to_user_id:to_user_id
                }
                console.log(_data)
                let dialogtxt = '是否将超级管理员转让给' + real_name
                clientUi.showDialog(' ', dialogtxt, function(data){
                    if(data.status == 1){
                         util.ajax({
                            url: '/team/supermanager/transfer',
                            data:_data ,
                            success: (res) => {
                                console.log(res)
                                if(res&&res.errno==0){
                                   // cache.getMemoryCache('detailWebViewID',(data)=>{
                                   //      if(data){
                                   //          commonPage.goBack(1,{'key':'success'}, data.webViewID)
                                   //      }
                                   //  })
                                   teamApi.updateTeam(to_team_id); 
                                   commonPage.goBack(0)
                                }else if(res.errmsg){
                                     widget.toast(res.errmsg)
                                }else{
                                    widget.toast('数据获取失败')
                                }
                            },
                            error: (xhr, status) => {
                                widget.toast('服务器异常')
                            },
                            noNetwork: () => {
                                widget.toast('网络连接失败，请检查网络')
                            }
                        })
                    }else{
                        console.log(7)
                    }
                },'是','否')
            }
        },
        created(){
            this.init()
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>

<style>
   
    .weui-cells_checkbox .setHui{
        color:#bbbbbb
    }
    .scroller-wrap .nav-item{
      float: left;
    }
    .mod-crumbs .arrow.nav-item{
    margin: 18px 8px;
  }
    .xs-container{
      background: #fff;
    }
</style>

